<template>
  <view class="information-list">
    <view class="page-title">
      <view>{{collectFileData.title}}</view>
      <image src="../../static/file.png"></image>
    </view>
    <view class="content">
      <scroll-view scroll-y="true" class="scroll-content" @scrolltoupper="upper">
        <view class="list">
          <view v-for="(item,index) in list" :key="index" @click="toDetail(item)">
            <view class="list-box f ai-c jc-s-b">
				<view class="recommend"  v-if="item.icon">
					<image :src="item.icon" mode="widthFix"></image>						 
				</view>
              <image :src="item.image" class="poster"></image>
              <view class="info f fd-c f1">
                <view class="title">
                  {{item.title}}
                </view>
                <view class="f ai-c jc-s-b browse">
                  <view>{{item.read_num}}人浏览</view>
                  <view class="f ai-c">
                    <image src="../../static/more.png" class="more" @click.stop="handleMore(index)">
                    </image>
                  </view>
                </view>
              </view>
            </view>
            <view class="f jc-s-b more-box" v-show="item.checked">
              <view class="f fd-c ai-c" v-show="item.is_download==1" @click.stop="handleDownload(item)">
                <image src="../../static/download.png"></image>
                下载
              </view>
              <view class="f fd-c ai-c">
                <button open-type="share" :data-obj="item" catchtap="share" style="">
                  <image src="../../static/share.png"></image>
                  <text>分享</text>
                </button>
              </view>
              <view class="f fd-c ai-c" v-show="item.is_print==1" @click.stop="handlePrint(item)">
                <image src="../../static/print.png"></image>
                打印
              </view>
            </view>
          </view>

        </view>
      </scroll-view>
    </view>
   <!-- <view class="btn-box">
      <view @click="handleCollect">{{collectFileData.is_collection?'已领取':'立即领取'}}</view>
    </view> -->
  </view>
</template>

<script>
import {
  getSetDatabaseList,
  collectionDatabaseSet,
  databaseInfo,
  readDatabaseSet
} from '@/api/index.js'
export default {

  data () {
    return {
      queryParams: {
        page: 1,
        limit: 10,
        set_id: '',
      },
      list: [],
      collectFileData: ''
    }
  },
  onLoad (opions) {

    this.queryParams.set_id = opions.id
    this.getList()
    this.getDetail(opions.id)
	this.updateNum()
  },


  onShareAppMessage (res) {	
    if (res.from === 'button') {
      // 来自页面内转发按钮
	    const data = res.target.dataset.obj
      return {
        title: `${data.title}`,
        path: `/pages/share/share?type=1&id=${data.id}&shareType=friend&database_type=1`,
        imageUrl: data.image
      };
    } 
	if (res.from === 'menu') {
		
		return {
		  title: `${this.collectFileData.title}规范合集`,
		 path:`pages/information/list?id=${this.collectFileData.id}`
		};
	}
  },
  methods: {
	  async updateNum(){
	  	await readDatabaseSet({set_id:this.queryParams.set_id})
	  },
    handlePrint (data) {
      uni.navigateTo({
        url: `/pages/pdf/printMaterial?id=${data.id}`
      })
    },
    async getDetail (id) {
      const { data } = await databaseInfo({ info_id: id, type: 2 })
      this.collectFileData = data
    },
    //收藏
    async handleCollect (data) {
      this.collectFileData.is_collection = !this.collectFileData.is_collection
      await collectionDatabaseSet({
        set_id: this.collectFileData.id,
        title: this.collectFileData.title
      })
    },
    //下载
    handleDownload (data) {
      // this.$store.dispatch('getFileData', data)
      uni.navigateTo({
        url: `/pages/download/download?id=${data.id}`
      })
    },
    async getList () {
      this.loading = true

      const {
        data
      } = await getSetDatabaseList(this.queryParams)
      this.loading = false
      uni.stopPullDownRefresh();
      data.forEach(item => {
        item.checked = false
      })
      this.list = this.list.concat(data)
    },
    //pdf详情
    toDetail (data) {
data.read_num=data.read_num+1
      uni.navigateTo({
        url: `/pages/pdf/pdf?id=${data.id}`
      })
    },
    //点击更多
    handleMore (index) {
      this.list.forEach((item, itemIndex) => {
        if (index == itemIndex) {
          item.checked = !item.checked
        } else {
          item.checked = false
        }

      })
    },
  }
}
</script>

<style scoped lang="scss">
button {
  background-color: transparent;
  border: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  font-size: 22rpx;
  color: #464e59;

  text {
    position: relative;
    margin-top: -14rpx;
  }
}

button::after {
  border: none;
}

.information-list {
  background: #e6f1fa;

  .btn-box {
    width: 100%;
    position: fixed;
    left: 0;
    bottom: 0;
    height: 180rpx;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0), #bde1f2);

    view {
      width: 650rpx;
      height: 85rpx;
      background: linear-gradient(to right, #eec25b, #f7e7ad);
      border-radius: 40rpx;
      margin: 40rpx auto;
      text-align: center;
      line-height: 85rpx;
      color: #fff;
      font-size: 32rpx;
      letter-spacing: 4rpx;
      font-weight: 800;
    }
  }

  .content {
    min-height: 77vh;
    background: linear-gradient(to bottom, #edf3fb, #e6f1fa);
    border-radius: 40rpx 40rpx 0 0;
    margin-top: -80rpx;
    position: relative;
    padding-top: 16rpx;
    padding-bottom: 100rpx;
    box-sizing: border-box;
    padding-bottom: 100rpx;

    .scroll-content {
      height: calc(100vh - 100px);
    }

    .list {
      width: 710rpx;
      margin: auto;

      .more-box {
        font-size: 22rpx;
        color: #464e59;
        margin-top: 24rpx;
        margin-bottom: 10rpx;
        padding: 0 24rpx;
        box-sizing: border-box;

        image {
          width: 40rpx;
          height: 40rpx;
          margin-bottom: 8rpx;
        }
      }

      .list-box {
        background: #fff;
        border-radius: 24rpx;
        padding: 24rpx;
        box-sizing: border-box;
        margin-bottom: 16rpx;
		position: relative;
		.recommend {
			
			
			position: absolute;
			left: 0;
			top: 0;
			image{
				width: 80rpx;
			}
			
		}

        .info {
          .browse {
            color: #999999;
            font-size: 24rpx;
            margin-top: 40rpx;

            .collect {
              width: 30rpx;
              height: 30rpx;
              margin-right: 16rpx;
            }

            .more {
              width: 30rpx;
              height: 30rpx;
            }
          }

          .title {
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
            font-size: 28rpx;
            font-weight: 700;
          }

          .recommend {
            background: linear-gradient(to right, #36c684, #03c9ba);
            width: 80rpx;
            height: 35rpx;
            color: #fff;
            font-size: 24rpx;
            border-radius: 8rpx;
            display: inline-block;
            text-align: center;
            margin-right: 8rpx;
            line-height: 35rpx;
            font-weight: 800;
          }
        }

        .poster {
          width: 170rpx;
          height: 210rpx;
          margin-right: 16rpx;
        }
      }
    }
  }

  .page-title {
    background: #4281f5;
    height: 350rpx;
    width: 100%;
    position: relative;
    padding: 32rpx;
    box-sizing: border-box;

    view {
      font-size: 32rpx;
      color: #fff;
      width: 60%;
      margin-top: 30rpx;
      line-height: 50rpx;
    }

    image {
      position: absolute;
      width: 340rpx;
      height: 340rpx;
      right: 30rpx;
      top: 0rpx;
    }
  }
}
</style>